<template>
    <div class="app">
        <h1>{{ msg }}，学生姓名是：{{ studentName }}</h1>
        <!-- 通过父组件给子组件传递函数props实现：子给父传数据 -->
        <School :getSchoolName="getSchoolName" />
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传数据 (第一种写法：使用 @ 或 v-on) -->
        <!--    给Student组件的实例对象vc，绑定自定义事件: atguigu1 -->
        <!-- <Student @atguigu1="getStudentName" @event2="event2Handle" /> -->
        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传数据 (第二种写法：使用 ref) 这种方式可以在任意时间点绑定事件 -->
        <Student ref="student" @click="show" />
        <!--    @click在组件上它不知道给组件里的哪个元素添加事件。会被当成自定义事件
                如果需要让组件整个任何地方被点击都有该点击事件，可以使用 .native 告诉 vue 这是原生事件，
                这时 事件会被绑定在 Student 组件的 Root元素 上，这是vue只允许模板只有一个 Root元素 的原因之一
            -->
    </div>
</template>

<script>
import Vue from 'vue';
import School from './components/School.vue';
import Student from './components/Student.vue';
export default Vue.extend({
    name: "App",
    components: { School, Student },
    data() {
        return {
            msg: '你好啊！',
            studentName: ''
        }
    },
    methods: {
        getSchoolName(name) {
            console.log("我是App，我收到了学校名：", name);
        },
        // 多参数接收法1：子组件需要传几个数据，这边就接受多少个
        // getStudentName(name, x, y, z) {
        //     console.log("我是App，我收到了学生名：", name, x, y, z);
        //     this.studentName=name
        // },
        // 多参数接收法2：除了name，剩余的参数都整理到数组 params 里（es6语法）
        // getStudentName(name, ...params) {
        //     console.log("我是App，我收到了学生名：", params);
        // },
        event2Handle() {
            console.log("event2被触发了！");
        },
        show() {
            alert(123)
        }
    },
    mounted() {
        setTimeout(() => {
            // 这个自定义事件是，student的，它调用，所以这个this是student的实例对象
            // 所以如果需要让this指向 本App组件，使用箭头函数，它自己没有this，this的指向就在上层的mounted里了，也就是App
            this.$refs.student.$on('atguigu2', (name, ...params) => {
                console.log("我是App，我收到了学生名：", name, params);
                console.log(this);

                this.studentName = name
            }) // 绑定自定义事件
            // 如果需要实现：只能触发一次，使用 $once
            // this.$refs.student.$once('atguigu2', this.getStudentName) // 绑定自定义事件（一次性）
        }, 1000);
    },
})
</script>

<style>
.app {
    background-color: gray;
    padding: 10px;
}
</style>